<template>
	<div>
		<div class="rate" @mouseout="mouseOut">
			<span class="star" @mouseover="mouseOver(num)" v-for="num in 5" :key="num">
				<img src="/impromptu/flower.png" alt="" />
			</span>
			<span class="hollow" :style="fontWidth">
				<span class="star" @click="onRate(num)" @mouseover="mouseOver(num)" v-for="num in 5" :key="num">
					<img src="/impromptu/flower_select.png" alt="" />
				</span>
			</span>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			score: 0,
			width: 0,
		};
	},
	computed: {
		fontWidth() {
			return `width:${this.width * 50}px`;
		},
	},
	methods: {
		mouseOut() {
			this.width = this.score;
		},
		mouseOver(num) {
			this.width = num;
		},
		onRate(num) {
			this.score = num;
			this.$emit('change', num);
		},
	},
};
</script>

<style scoped lang="less">
.star {
	letter-spacing: 3px;
	img {
		display: block;
		width: 50px;
		cursor: pointer;
	}
}
.rate {
	position: relative;
	display: flex;
}
.rate > span.hollow {
	position: absolute;
	display: flex;
	top: 0;
	left: 0;
	overflow: hidden;
}
</style>
